<template>
    <div class="template">
        <div class="search">
<!--            <div>-->
<!--                <Input clearable -->
<!--                    v-model="search.name"-->
<!--                    placeholder="角色名称"-->
<!--                    style="width: 200px; margin-right: 10px"-->
<!--                    icon="ios-search"-->
<!--                ></Input>-->
<!--                <Input clearable -->
<!--                    v-model="search.slug"-->
<!--                    placeholder="角色标识"-->
<!--                    style="width: 200px; margin-right: 10px"-->
<!--                ></Input>-->
<!--                <Button style="width: 90px" type="primary" icon="ios-search" @click="searchFn">搜索</Button>-->
<!--                <Button style="width: 90px; margin-left:10px" @click="clearFn">清空</Button>-->
<!--            </div>-->
            <router-link :to="{name: 'add-role'}">
                <Button type="primary" icon="ios-add">添加角色</Button>
            </router-link>
        </div>
        <div class="table">
            <Table border :columns="diyData.columns" :data="apiData.tableList">
                <template slot="footer">
                    <Page
                        :total="apiData.total"
                        show-total
                        :current="search.pageNo"
                        class-name="footer-page"
                        @on-change="pageChange"
                    ></Page>
                </template>
            </Table>
        </div>
    </div>
</template>

<script>
import {apiRoleList, apiRoleDelete} from '@/api/admin.js';

export default {
    name: '',
    data() {
        return {
            query: {},
            search: {
                name: '',
                slug: '',
                page: 1
            },
            diyDom: {},
            diyData: {
                columns: [
                    {
                        title: '序号',
                        render: (h, params) => {
                            return h('div', params.index + 1);
                        }
                    },
                    {
                        title: '角色名称',
                        key: 'name'
                    },
                    {
                        title: '角色标识',
                        key: 'slug'
                    },
                    {
                        title: '添加时间',
                        key: 'created_at'
                    },

                    {
                        title: '操作',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'a',
                                    {
                                        style: {
                                            marginRight: '10px',
                                            borderRight: '1px solid #c5c5c5',
                                            paddingRight: '10px',
                                            color: '#2D8cF0'
                                        },
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    name: 'add-role',
                                                    query: {
                                                        id: params.row.id,
                                                        name: params.row.name,
                                                        sort: params.row.sort
                                                    }
                                                });
                                            }
                                        }
                                    },
                                    '编辑'
                                ),
                                h(
                                    'a',
                                    {
                                        style: {
                                            color: '#ed4014'
                                        },
                                        on: {
                                            click: () => {
                                                this.deleteRole(params.row.id);
                                            }
                                        }
                                    },
                                    '删除'
                                )
                            ]);
                        }
                    }
                ]
            },
            apiData: {
                total: 0,
                tableList: []
            }
        };
    },
    methods: {
        // 获取表格数据
        getTableList() {
            this.$store.commit('setSpinShow', true);
            apiRoleList({
                ...this.search
            }).then(res => {
                const {data, meta} = res;
                this.apiData.tableList = data;
                this.apiData.total = meta.pagination.total;
            }).finally(() => this.$store.commit('setSpinShow', false));
        },
        // 删除角色
        deleteRole(id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除当前角色？',
                onOk: () => {
                    setTimeout(() => {
                        apiRoleDelete(id).then(res => {
                            this.$Message.success('删除成功');
                            this.getTableList();
                        });
                    }, 300);
                }
            });
        },
        // 分页
        pageChange(e) {
            this.search.page = e;
            this.getTableList();
        },
        // 搜索
        searchFn() {
            this.search.page = 1;
            this.getTableList();
        },
        // 清空
        clearFn() {
            this.search = {
                name: '',
                slug: '',
                page: 1
            };
            this.getTableList();
        }
    },
    mounted() {
        // this.getTableList();
    }
};
</script>

<style scoped lang="less">
.template {
    .search {
        display: flex;
        justify-content: space-between;
    }

    .table {
        margin-top: 10px;
    }

}
</style>
